<template>
  <ComWrapper hasBackground>
    <!-- 头部 -->
    <el-form label-width="60px" :inline="true">
      <el-row>
        <el-col :span="4">
          <el-form-item label="用户名">
            <el-input
              v-model="formData.username"
              placeholder="请输入用户名"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="状态">
            <el-select v-model="formData.enable" style="width: 100%">
              <el-option label="全部" value="" />
              <el-option label="启用" :value="1" />
              <el-option label="禁用" :value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="0px">
            <el-button type="primary">查询</el-button>
            <el-button type="primary" @click="onEditOrAdd('', 'add')">添加</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 表格 -->
    <Table :tableData="userlist">
      <el-table-column #default="scope" align="center" label="头像">
        <el-avatar :size="50" :src="scope.row.avatar" />
      </el-table-column>
      <el-table-column align="center" prop="name" label="用户名" width="180" />
      <el-table-column align="center" prop="fullname" label="真实姓名" width="180" />
      <el-table-column align="center" #default="scope" label="角色">
        <el-tag 
          v-show="scope.row.role.length" 
          v-for="item in scope.row.role" 
          :key="item.id" 
          :type="item.tagType"
        >
          {{item.name}}
        </el-tag>
        <el-tag v-show="!scope.row.role.length" type="danger">黑名单人员</el-tag>
      </el-table-column>
      <el-table-column #default="scope" align="center" label="启用状态">
        <el-switch v-model="scope.row.enable" />
      </el-table-column>
      <el-table-column align="center" prop="date" label="添加时间" />
      <el-table-column #default="scope" align="center" label="操作">
        <template v-if="scope.row.fullname === 'admin'">
          <span>-</span>
        </template>
        <template v-else>
          <el-link type="primary" :underline="false" @click="onEditOrAdd(scope.row, 'edit')" style="margin-right: 16px;">编辑</el-link>
          <el-link type="danger" :underline="false" @click="onDelete(scope.row)">删除</el-link>
        </template>
      </el-table-column>
    </Table>

    <UpdateModal :type="modalType" v-model="updateModalVisible" />
  </ComWrapper>
</template>

<script setup>
import {ref, h, defineAsyncComponent} from 'vue'
import {ElMessageBox, ElMessage} from 'element-plus'
import {tableData} from './mock/list'
import {setItem} from '@/utils/local'
import {USER_UPDATE_MODAL} from '@/utils/constant'

const Table = defineAsyncComponent(() => import('@/components/Table'))
const UpdateModal = defineAsyncComponent(() => import('./components/UpdateModal'))

const updateModalVisible = ref(false)
const modalType = ref('')
const userlist = ref([])
const formData = ref({
  username: '',
  enable: ''
})

setUserlist()
// 初始化table数据
function setUserlist() {
  tableData.forEach(item => {
    const tagMap = {
      '超级管理员': 'success',
      '游客': 'info',
      '开发者': '',
      '运营': 'warning'
    }
    if (item.role.length) {
      item.role.forEach(i => i.tagType = tagMap[i.name])
    }
  })

  userlist.value = tableData
}
// 添加、编辑
function onEditOrAdd(item, type) {
  modalType.value = type
  updateModalVisible.value = true
  type === 'edit' && setItem(USER_UPDATE_MODAL, item)
}
// 删除
function onDelete(item) {
  console.log(item)
  ElMessageBox.confirm(
    h('p', null, [
      h('span', null, '确定要删除'),
      h('i', {style: 'color: red; margin: 0 12px'}, item.fullname),
      h('span', null, '吗？'),
    ]),
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => ElMessage.error('删除失败'))
}
</script>